<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select v-model="listQuery.shopId" clearable style="width: 200px" class="filter-item" :placeholder="$t('Please_select_store_')">
        <el-option v-for="item in shops" :label="item.name" :value="item.id"/>
      </el-select>
      <el-select v-model="listQuery.serverType" clearable style="width: 200px" class="filter-item" :placeholder="$t('请选择服务类型')">
        <el-option v-for="item in serverType" :label="item.name" :value="item.id"/>
      </el-select>
      <el-select v-model="listQuery.orderStatus" clearable class="filter-item" :placeholder="$t('请选择货品状态')">
        <el-option :value="1" :label="$t('申请调货（待处理）')"/>
        <el-option :value="2" :label="$t('同意调货（待审核）')"/>
        <el-option :value="6" :label="$t('同意调货（拒绝调货）')"/>
        <el-option :value="3" :label="$t('总部审核（待发货）')"/>
        <el-option :value="7" :label="$t('总部审核（审核驳回）')"/>
        <el-option :value="4" :label="$t('erp处理发货（待收货）')"/>
        <el-option :value="8" :label="$t('erp处理发货（拒绝发货）')"/>
        <el-option :value="9" :label="$t('确认收货（拒绝收货）')"/>
      </el-select>
      <!-- <el-date-picker clearable
        class="filter-date-item"
        v-model="dateRange"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        :start-placeholder="$t('处理开始日期')"
        :end-placeholder="$t('处理结束日期')">
      </el-date-picker> -->
      <el-date-picker      class="filter-date-item" v-model="dateRange" value-format="yyyy-MM-dd" type="daterange"
      align="right" unlink-panels range-separator="——" :start-placeholder='$t("开始日期")' :end-placeholder='$t("结束日期")'
      :picker-options="pickerOptions">
    </el-date-picker>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
      <!--      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleApplying">申请</el-button>-->
      <!--      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">{{$t('Find')}}</el-button>-->
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>
      <el-table-column align="center" type="index" :label="$t('序号')" :index="getIndex" width="50"></el-table-column>

      <el-table-column align="center" :label="$t('Servicing_number')" prop="orderSn"/>

      <el-table-column align="center" :label="$t('Request_time')" prop="addTime"/>

      <el-table-column align="center" :label="$t('员工名称')" prop="nikeName"/>

      <el-table-column align="center" :label="$t('Service_types')" prop="serviceType">
        <template slot-scope="scope">
          <el-tag>{{ serviceStatusFilter(scope.row.serviceType)  }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Store_location')" prop="shopName"/>

      <el-table-column align="center" :label="$t('Request_status')" prop="orderStatus" width="200">
        <template slot-scope="scope">
            <el-tag :type="['6', '7', '8', '9'].includes(String(scope.row.orderStatus)) ? 'danger' : 'success'">
                {{ statusMap[scope.row.orderStatus] }}
            </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Processing_time')" prop="updateTime"/>

      <el-table-column align="center" :label="$t('Operate')" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['GET /admin/p/stock_stockin_detail']" type="primary" size="mini" @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

  </div>
</template>

<script>

import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination'
import { merchandiseList } from '@/api/shop'
import { allForPerm } from '@/api/shop'
export default {
  name: 'merchandiseList',
  components: { BackToTop, Pagination },
  filters: {

  },
  data() {
    const statusMap = {
      1: this.$t('申请调货（待处理）'),
      2: this.$t('同意调货（待审核）'),
      3: this.$t('总部审核（待发货）'),
      4: this.$t('erp处理发货（待收货）'),
      5: this.$t('确认收货（已收货）'),
      6: this.$t('同意调货（拒绝调货）'),
      7: this.$t('总部审核（审核驳回）'),
      8: this.$t('erp处理发货（拒绝发货）'),
      9: this.$t('确认收货（拒绝收货）'),
    }
    const serviceMap = {
      1:this.$t('门店进货')
    }
    return {
      pickerOptions: {
          shortcuts: [{
            text: this.$t('Yesterday'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_7_days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_month'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },
      dateRange:[],
      shops:[],
      statusMap,
      serviceMap,
      list: [{
        orderSn: 'O00001',
        addTime: '2019-01-01 20:20:00',
        userName: '上海店长',
        serviceType: '门店进货',
        shopName: '上海门店',
        orderStatus: 1,
        updateTime: '2019-01-01 20:20:00'
      }],
      total: 0,
      listLoading: false,
      serverType:[{id:1,name:'门店进货'}],
      listQuery: {
        page: 1,
        limit: 20,
        shopId:undefined,
        orderStatus: undefined,
        startDate:undefined,
        endDate:undefined,
        waning:undefined,
        sort: 'add_time',
        order: 'desc'
      }
    }
  },
  created() {
    this.getList()
    allForPerm().then(response=>{
      this.shops = response.data.data.list
    })
  },
  methods: {
      serviceStatusFilter(status) {
      return this.serviceMap[status]
    },
    getList() {
      this.listLoading = true
      merchandiseList(this.listQuery).then(response => {
        const res = response.data.data;
         this.list = res.list;
         this.total = res.total;
         this.listLoading = false
       }).catch(() => {
         this.list = []
         this.total = 0
         this.listLoading = false
       })
    },
    handleFilter() {
      if(this.dateRange && this.dateRange.length == 2){
        this.listQuery.startDate = this.dateRange[0]
        this.listQuery.endDate = this.dateRange[1]
      }else{
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
      this.getList()
    },
    handleDetail(row) {
      this.$router.push({ path: '/repository/order/detail', query: { id: row.id }})
    },
    getIndex(index) {
      return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
    }
  }
}
</script>

<style scoped>

</style>

